<!-- 教学资源列表模块入口 -->
<template>
	<div class="course-list">
		<div class="header">
			<div class="op">
				<el-button
					@click="addCourse()"
					type="success"
					size="small"
				>
					<i class="el-icon-plus"></i>
					新增教学资源
				</el-button>
				<el-button
					@click="multipleDeleteCourse()"
					type="danger"
					size="small"
				>
					<i class="el-icon-delete"></i>
					批量删除
				</el-button>
				<el-button
					@click="exportCourseExcel()"
					type="primary"
					size="small"
				>
					<i class="el-icon-download"></i>
					批量下载
				</el-button>
			</div>
			<div class="collect">
				<div class="collect-item">
					<label for=""> 教学分类： </label>
					<el-select
						v-model="sourceSort"
						placeholder="请选择分类"
					>
						<el-option
							v-for="(item, key) in courseSortList"
							:key="key"
							:label="`[${item.sort_id}] ${item.sort_desc}`"
							:value="item.sort_id"
						>
						</el-option>
					</el-select>
				</div>
				<div class="collect-item">
					<label for="">
						教学名称:
					</label>
					<el-input
						placeholder="请输入教学名称"
						v-model="courseName"
						style="width: 200px"
					>
					</el-input>
				</div>
				<el-button
					@click="search()"
					type="primary"
					size="small"
				>
					<i class="el-icon-search">
					</i>
					查询
				</el-button>
				<el-button
					@click="search()"
					type="primary"
					size="small"
				>
					<i class="el-icon-refresh-left"></i>
					刷新
				</el-button>
			</div>
		</div>
		<!-- 数据展示 -->
		<el-table
			:data="currentPageData"
			element-loading-text="Loading"
			border
			fit
			highlight-current-row
		>
			<el-table-column
				align="center"
				width="50"
			>
				<template
					slot="header"
					slot-scope="scope"
				>
					<el-checkbox v-model="checkedAll"></el-checkbox>
				</template>
				<template slot-scope="scope">
					<el-checkbox v-model="scope.row.checked"></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="教学编号"
				width="150"
			>
				<template slot-scope="scope">
					{{ scope.row.course_id || "--"
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="教学名称"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.course_name ||
						"--" }}
				</template>
			</el-table-column>
			<el-table-column
				label="教学老师"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.course_teacher ||
						"--" }}
				</template>
			</el-table-column>
			<el-table-column
				label="教学分类"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.sort_name ||
						"--" }}
				</template>
			</el-table-column>
			<el-table-column
				label="文件类型"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.file_type ||
						"--" }}
				</template>
			</el-table-column>
			<el-table-column
				label="创建时间"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.start_time ||
						"--" }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="created_at"
				label="操作"
				width="300"
			>
				<template slot-scope="scope">
					<el-button
						@click.native.prevent="download(scope)"
						type="primary"
						size="small"
					>
						<i class="el-icon-download"></i>
						下载
					</el-button>
					<el-button
						@click.native.prevent="editCourse(scope)"
						type="primary"
						size="small"
					>
						<i class="el-icon-edit"></i>
						编辑
					</el-button>
					<el-button
						@click.native.prevent="deleteCourse(scope)"
						type="danger"
						size="small"
					>
						<i class="el-icon-delete"></i>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			class="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="currentPageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="7"
		>
		</el-pagination>
		<!-- 新增教学 -->
		<el-dialog
			title="新增教学"
			:visible.sync="addCourseSortData.dialogVisible"
			width="50%"
			:before-close="handleAddCourseSortDataClose"
		>
			<el-form
				ref="form"
				:model="addCourseSortData"
				label-width="80px"
			>
				<el-form-item
					style="font-size:16px"
					label="教学名称"
				>
					<el-input v-model="addCourseSortData.name"></el-input>
				</el-form-item>
				<el-form-item
					style="font-size:16px"
					label="授课老师"
				>
					<el-input v-model="addCourseSortData.teacher"></el-input>
				</el-form-item>
				<el-form-item label="教学分类">
					<el-input v-model="addCourseSortData.classify"></el-input>
				</el-form-item>
			</el-form>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="warning"
					@click="handleAddCourseSortDataCancel()"
				>
					取 消
				</el-button>
				<el-button
					type="primary"
					@click="handleAddCourseSortDataConfirm()"
				>
					确 定
				</el-button>
			</span>
		</el-dialog>
		<!-- 编辑教学分类 -->
		<el-dialog
			title="编辑教学"
			:visible.sync="editCourseSortData.dialogVisible"
			width="50%"
			:before-close="handleEditCourseSortDataClose"
		>
			<el-form
				ref="form"
				:model="editCourseSortData"
				label-width="100px"
			>
				<el-form-item label="教学编号ID">
					<el-input
						v-model="editCourseSortData.id"
						disabled
					></el-input>
				</el-form-item>
				<el-form-item label="教学名称">
					<el-input v-model="editCourseSortData.name"></el-input>
				</el-form-item>
				<el-form-item label="教学老师">
					<el-input v-model="editCourseSortData.teacher"></el-input>
				</el-form-item>
				<el-form-item label="教学分类">
					<el-input v-model="editCourseSortData.desc"></el-input>
				</el-form-item>
				<el-form-item label="开始时间">
					<el-input
						v-model="editCourseSortData.start_time"
						disabled
					></el-input>
				</el-form-item>
			</el-form>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="warning"
					@click="handleEditCourseSortDataCancel()"
				>
					取 消
				</el-button>
				<el-button
					type="primary"
					@click="handleEditCourseSortDataConfirm()"
				>
					确 定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
// 引入loading
import { Loading } from "element-ui";
// 引入请求
import request from "@/utils/request";

export default {
	data() {
		return {
			// 是否全选所有页
			checkedAll: false,
			// 教学分类
			sourceSort: "",
			courseSortList: [],
			// 教学名称
			courseName: "",
			// 用户选择时间，0 开始时间  1 结束时间
			dateTime: [],
			// 全部数据，用于存储当前查询到的所有数据，方便分页功能
			allData: [],
			// 当前页数据
			currentPageData: [],
			// 筛选数据,用于存储当前筛选的数据
			filterData: [],
			// 当前页，默认第一页
			currentPage: 1,
			// 当前页大小，默认每页10条数据
			currentPageSize: 10,
			// 当前数据总数
			paginationTotal: 0,
			addCourseSortData: {
				dialogVisible: false,
				id: "",
				name: "",
				teacher: "",
				classify: "",
				student: "",
			},
			// 编辑分类数据
			editCourseSortData: {
				dialogVisible: false,
				id: "",
				name: "",
				teacher: "",
				desc: "",
				start_time: "",
				end_time: "",
			},
		};
	},
	created() {
		// 模块初始化事件入口
		this.init();
	},
	methods: {
		/**
		 * @desc init
		 */
		init() {
			// 获取用户教学分类下拉列表数据
			this.getCourseSortList();
			this.getSourceDataList();
		},
		/**
		 * @desc 获取教学分类数据
		 */
		getCourseSortList() {
			let data = {};
			request({
				url: "/vue-admin-template/course/sort",
				method: "get",
				data,
			})
				.then((res) => {
					if (res.code === 20000) {
						if (typeof res.data === "object" && Object.keys(res.data)) {
							let temp = res.data.sort_list;
							this.courseSortList = temp.sort((a, b) => {
								return parseInt(a.sort_id) - parseInt(b.sort_id);
							});
						}
					}
				})
				.catch((err) => {
					setTimeout(() => {
						this.$message({
							message: "接口错误",
							type: "error",
						});
					});
				});
		},
		/**
		 * @desc 获取当前教学列表数据
		 */
		getSourceDataList() {
			let data = {};
			request({
				url: "/vue-admin-template/course/list",
				method: "post",
				data,
			})
				.then((res) => {
					if (res.code === 20000) {
						if (
							typeof res.data === "object" &&
							Object.keys(res.data).length !== 0
						) {
							// let temp = res.data.sort_list;
							// this.courseSortList = temp.sort((a, b) => {
							// 	return parseInt(a.sort_id) - parseInt(b.sort_id);
							// });
							this.currentPageData = res.data.list;
						}
					}
				})
				.catch((err) => {
					setTimeout(() => {
						this.$message({
							message: "接口错误",
							type: "error",
						});
					});
				});
		},
		handleAddCourseSortDataClose() {},
		/**
		 * @description
		 */
		handleEditCourseSortDataClose() {},
		/**
		 * @desc 新增教学
		 * 1、新增教学打开教学上传弹窗
		 * 2、
		 */
		addCourse() {
			this.addCourseSortData.dialogVisible = true;
		},
		handleAddCourseSortDataCancel() {
			this.addCourseSortData.dialogVisible = false;
		},

		//确定新增教学
		handleAddCourseSortDataConfirm() {
			if (this.addCourseSortData.name == "") {
				this.$message({
					message: "教学名称不能为空。",
					type: "error",
				});
				return;
			}
			if (this.addCourseSortData.teacher == "") {
				this.$message({
					message: "老师名称不能为空。",
					type: "error",
				});
				return;
			}
			if (this.addCourseSortData.classify == "") {
				this.$message({
					message: "教学分类不能为空。",
					type: "error",
				});
				return;
			}
			if (this.addCourseSortData.student == "") {
				this.$message({
					message: "班级学生不能为空。",
					type: "error",
				});
				return;
			}
			/* 数据判空结束 */
			/* 开始请求接口 */
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "正在添加中请稍后...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			/*  */
			let postdata = {
				name: "test",
			};

			request({
				/* 请求地址 */
				url: "/vue-admin-template/course/sort/add",
				/* 请求方式 */
				method: "post",
				/* 请求传参 */
				postdata,
				/* .then()请求成功的回调 */
				/* 
					1、提示用户，
					2、关闭loading
					3、清空弹窗内容
					4、关闭弹窗
					5、刷新当前数据表格
				*/
				/* addCourseSortData: {
				dialogVisibianle: false,
				id:"",
				name: "",
				teacher:"",
				student:"",
			}, */
			})
				.then(() => {
					setTimeout(() => {
						this.$message({
							message: "教学列表添加成功",
							type: "success",
						});
						loading.close();
						this.addCourseSortData.name = "";
						this.addCourseSortData.teacher = "";
						this.addCourseSortData.student = "";
						this.addCourseSortData.classify = "";
						this.addCourseSortData.dialogVisible = false;
					});
					/* 请求失败的回调 */
				})
				.catch(() => {
					this.$message({
						message: "教学分类添加失败",
						type: "success",
					});
					loading.close();
					this.addCourseSortData.name = "";
					this.addCourseSortData.teacher = "";
					this.addCourseSortData.student = "";
					this.addCourseSortData.classify = "";
					this.addCourseSortData.dialogVisible = false;
				});
		},
		/* // 编辑分类数据
		editCourseSortData: {
				dialogVisible: false,
				id: "",
				name: "",
				teacher: "",
				desc: "",
				start_time:"",
				end_time: "",
			}, */
		editCourse(scope) {
			console.log(scope);
			(this.editCourseSortData.id = scope.row.course_id),
				(this.editCourseSortData.name = scope.row.course_name),
				(this.editCourseSortData.teacher = scope.row.course_teacher),
				(this.editCourseSortData.desc = scope.row.sort_name),
				(this.editCourseSortData.start_time = scope.row.start_time),
				(this.editCourseSortData.end_time = scope.row.end_time),
				(this.editCourseSortData.dialogVisible = true);
		},
		handleEditCourseSortDataConfirm() {
			if (this.editCourseSortData.name == "") {
				this.$message({
					message: "教学名称不能为空。",
					type: "error",
				});
				return;
			}
			if (this.editCourseSortData.teacher == "") {
				this.$message({
					message: "老师名称不能为空。",
					type: "error",
				});
				return;
			}
			if (this.editCourseSortData.desc == "") {
				this.$message({
					message: "教学分类名称不能为空。",
					type: "error",
				});
				return;
			}
			if (this.editCourseSortData.start_time == "") {
				this.$message({
					message: "开始时间不能为空。",
					type: "error",
				});
				return;
			}
			if (this.editCourseSortData.end_time == "") {
				this.$message({
					message: "结束时间不能为空。",
					type: "error",
				});
				return;
			}
			const loading = this.$loading({
				lock: true,
				text: "正在修改中请稍后...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			/**
			 * @desc 处理编辑分类的postdata
			 */
			let postdata = {
				course_id: this.editCourseSortData.id,
				course_name: this.editCourseSortData.name,
				course_teacher: this.editCourseSortData.teacher,
				sort_name: this.editCourseSortData.desc,
				sort_name: this.editCourseSortData.start_time,
				end_time: this.editCourseSortData.end_time,
			};
			request({
				/* 请求地址 */
				url: "/vue-admin-template/course/sort/edit",
				/* 请求方式 */
				method: "post",
				/* 请求传参 */
				postdata,
				/* .then()请求成功的回调 */
				/* 
					1、提示用户，
					2、关闭loading
					3、清空弹窗内容
					4、关闭弹窗
					5、刷新当前数据表格
				*/
			})
				.then(() => {
					setTimeout(() => {
						this.$message({
							message: "教学分类添加成功",
							type: "success",
						});
						// 关闭loading
						loading.close();
						// 关闭编辑弹窗
						this.editCourseSortData.dialogVisible = false;
						// 清理数据
						this.editCourseSortData.id = "";
						this.editCourseSortData.name = "";
						this.editCourseSortData.teacher = "";
						this.editCourseSortData.desc = "";
						this.editCourseSortData.start_time = "";
						this.editCourseSortData.end_time = "";
					});
					/* 请求失败的回调 */
				})
				.catch(() => {
					this.$message({
						message: "教学分类添加失败",
						type: "error",
					});
					// 关闭loading
					loading.close();
					// 关闭编辑弹窗
					this.editCourseSortData.dialogVisible = false;
					// 清除编辑弹窗数据
					this.editCourseSortData.id = "";
					this.editCourseSortData.name = "";
					this.editCourseSortData.teacher = "";
					this.editCourseSortData.desc = "";
					this.editCourseSortData.start_time = "";
					this.editCourseSortData.end_time = "";
				});
		},
		handleEditCourseSortDataCancel() {
			this.editCourseSortData.dialogVisible = false;
		},
		addSource() {},
		/**
		 * @desc 批量删除
		 * 1、只有用户当前勾选了教学才会触发，否则提示用户
		 * 2、批量删除, 需要用户进行二次确认，才能进行删除，避免用户误删操作的产生
		 * 3、删除之后的数据，会保存一段时间，用户可以这个保留的时间内在回收站进行找回
		 */
		multipleDelete() {},
		/**
		 * @desc 批量下载
		 */
		multipleDownLoad() {},
		/**
		 * @desc 时间格式化（时间戳转化为日期）
		 */
		formData(data, format) {
			data = new Date(data);
			let time = {
				"M+": data.getMonth() + 1,
				"D+": data.getDate(),
				"H+": data.getHours(),
				"m+": data.getMinutes(),
				"s+": data.getSeconds(),
			};

			if (/(y+)/i.test(format)) {
				format = format.replace(
					RegExp.$1,
					(data.getFullYear() + "").substr(4 - RegExp.$1.length)
				);
			}

			for (let k in time) {
				if (new RegExp("(" + k + ")").test(format)) {
					format = format.replace(
						RegExp.$1,
						RegExp.$1.length === 1
							? time[k]
							: ("00" + time[k]).substr(("" + time[k]).length)
					);
				}
			}
			return format;
		},
		/**
		 * @desc 监听分页器大小改变
		 */
		handleSizeChange(size) {
			// 更新当前分页器显示总数大小
			this.currentPageSize = size;
			// 刷新数据
			search();
		},
		/**
		 * @desc 监听当前页大小改变
		 */
		handleCurrentChange(page) {
			// 更新当前分页器页数
			this.currentPage = page;
			// 刷新数据
			search();
		},
		// 弹窗关闭
		handleClose() {},
	},
};
</script>
<style lang="scss" scoped>
.course-list {
	padding: 20px 10px;

	.header {
		display: flex;
		justify-content: space-between;
		height: 40px !important;
		margin-bottom: 20px;
	}

	.op {
		display: flex;
		justify-self: start;
	}

	.collect {
		display: flex;
		justify-content: flex-start;
	}

	.collect .collect-item {
		margin-right: 20px;
	}

	.pagination {
		margin-top: 20px;
		float: right;
	}

	.content {
		.item {
			margin: 20px 0px;

			.title {
				font-size: 16px;
				font-weight: 700;
				color: rgb(28, 48, 230);
			}

			.desc {
				img: {
					height: 100px;
					width: 100px;
					border-radius: 20px;
				}
			}
		}
	}
}
</style>
